<!--
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the Source EULA. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/
-->
<div style="overflow: hidden; width: 100%; height: 100%; display: flex; flex-flow: column">
	<div #toolbar class="editor-toolbar actionbar-container" style="flex: 0 0 auto; display: flex; flex-flow: row; width: 100%; align-items: center;">
	</div>
	<div #container class="scrollable" style="flex: 1 1 auto; position: relative; outline: none" (click)="unselectActiveCell()" (scroll)="scrollHandler($event)">
		<loading-spinner [loading]="isLoading"></loading-spinner>
		<div *ngFor="let cell of cells">
			<div class="notebook-cell" (click)="selectCell(cell, $event)" [class.active]="cell.active">
				<cell-toolbar-component *ngIf="cell.active" [cellModel]="cell" [model]="model"></cell-toolbar-component>
				<code-cell-component *ngIf="cell.cellType === 'code'" [cellModel]="cell" [model]="model" [activeCellId]="activeCellId">
				</code-cell-component>
				<text-cell-component *ngIf="cell.cellType === 'markdown'" [cellModel]="cell" [model]="model" [activeCellId]="activeCellId">
				</text-cell-component>
			</div>
		</div>
		<div class="notebook-cell" *ngIf="(!cells || !cells.length) && !isLoading">
			<placeholder-cell-component [cellModel]="cell" [model]="model">
			</placeholder-cell-component>
		</div>
		<div class="book-nav" #bookNav [style.visibility]="navigationVisibility">
		</div>
	</div>
</div>
